<template>
    <div class="info-attr-module">

        <div style="height:.4rem"></div>
        <div class="attr-data">
            <div class="item">
                <span>用户类型</span>
                <div>{{baseService.userType(ruleForm.roleId)}}</div>
            </div>
            <div class="item">
                <span>姓名</span>
                <div>{{ruleForm.realName}}</div>
            </div>
            <div class="item">
                <span v-if="!(ruleForm.roleId && ruleForm.roleId.includes('2')) && teamForm.account">当前代表队</span>
                <span v-else-if="!(ruleForm.roleId && ruleForm.roleId.includes('2'))  && teamForm.realName">当前领队</span>
                <span v-else></span>
                <div>{{teamForm.teamName}}</div>
            </div>
            <div class="item">
                <span>性别</span>
                <div>{{ruleForm.sex?(ruleForm.sex==='1'?'男':'女'):''}}</div>
            </div>
            <div class="item">
                <span v-if="!(ruleForm.roleId && ruleForm.roleId.includes('2'))  && teamForm.phone">联系方式</span>
                <div>{{teamForm.phone}}</div>
            </div>
            <div class="item">
                <span>证件类型</span>
                <div>
                  <!-- 5 其他 -->
                  {{ruleForm.idType === '1' ? '居民身份证' : ruleForm.idType === '2' ? '临时身份证' : ruleForm.idType === '3' ? '港澳居民来往内地通行证' : ruleForm.idType === '4' ? '台湾居民来往大陆通行证' : ruleForm.idType === '5' ? '护照/其他' : ''}}
                </div>
            </div>
            <div class="item">
                <span>证件号码</span>
                <div>{{baseService.hideIdCard(ruleForm.idCard)}}</div>
            </div>
            <div class="item">
                <span>参与单位</span>
                <div>{{ruleForm.company}}</div>
            </div>
            <div class="item">
                <span>联系方式(手机)</span>
                <div>{{ruleForm.phone}}</div>
            </div>
            <div class="item">
                <span>电子邮箱</span>
                <div>{{ruleForm.email}}</div>
            </div>
            <div class="item">
                <span>一寸证件照</span>
                <div><img :src="ruleForm.header" class="cert"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import app from "@/constants/app";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps } from 'element-plus'
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {getCache, setCache} from "@/utils/cache";

const imageUrl = ref('')
const imageUrl2 = ref('')
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const route = useRoute();
const baseUrl = app.api;
let router = useRouter();
const ruleForm = reactive({
  id: null,
  email: "",
  company: "",
  realName: '',
  sex: "",
  idType: "",
  idCard: "",
  phone: "",
  code: "",
  header: "",
  roleId: ""
});

const teamForm = reactive({
  teamId: null,
  teamName: null,
  account: null,
  realName: null,
  phone: null
});

const rules = reactive<FormRules>({
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  realName: [{ required: true, message: "请输入领队姓名", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  idType: [{ required: true, message: "请选择证件", trigger: "change", }],
  idCard: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  header: [{ required: true, message: "请上传头像", trigger: "blur" }],
});

//取缓存里的用户id
const userCache = getCache('CacheToken', { isSessionStorage: true }, {});
let id = route.query.id;
if(!id){
  id = userCache.id;
}

/**
 * 查询用户信息
 * @param formEl
 */
const userInfo = async () => {
  baseService
      .get("/front/spuser/"+id, {
      })
      .then((res) => {
            if (res.code === 0) {
              let userInfo = res.data;
              ruleForm.id = userInfo.id;
              ruleForm.email = userInfo.email;
              ruleForm.company = userInfo.company;
              ruleForm.phone = userInfo.phone;
              ruleForm.realName = userInfo.realName;
              ruleForm.sex = userInfo.sex+'';
              ruleForm.header = userInfo.header;
              ruleForm.idType = userInfo.idType;
              ruleForm.roleId = userInfo.roleId;
              ruleForm.idCard = baseService.hideIdCard(userInfo.idCard);
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
};


/**
 * 查询用户信息
 * @param formEl
 */
const queryUserById = async () => {
  baseService
      .get("/front/spuser/queryUserById?id="+id, {
      })
      .then((res) => {
            if (res.code === 0) {
              let data = res.data;
              teamForm.teamId = data.teamId;
              teamForm.teamName = data.teamName;
              teamForm.account = data.account;
              teamForm.realName = data.realName;
              teamForm.phone = data.phone;
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
};


userInfo();
queryUserById();



</script>


<style lang="scss" scoped>
@import "./style.scss";
</style>